<template>
	<view class="content">
		<view class="search" :class="{fixedTop:isFixedTop==true}">
			<input type="text" class="input" placeholder="跳转" @click="goSearch">
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true" class="swiper">
			<swiper-item v-for="item,index in bannerList" :key="index">
				<image :src="item.picUrl" mode="" class="img"></image>
			</swiper-item>
			
		</swiper>
		<!-- 商品列表 -->
		<view class="goods">
			<view class="goods-item" v-for="item,index in goodsList" :key="index">
				<image :src="item.pic" mode="" class="img"></image>
				
				<view class="title">
					{{item.name}}
				</view>
				<view class="desc">
					{{item.characteristic}}
				</view>
				<view class="price">
					{{item.minPrice}}
				</view>
			</view>
		</view>
		<view class="back" @click="goBack">
			↑
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				bannerList:[],//轮播图
				queryInfo:{
					nameLike:'',//关键字
					page:1,//当前页
					pageSize:10
				},
				goodsList:[],//商品列表数据
				isFixedTop:false,//吸顶的状态
			}
		},
		onLoad() {
            // 轮播图
			uni.request({
				url:'https://api.it120.cc/hjl/banner/list?type=index',
				success: (res) => {
					console.log(res);
					this.bannerList = res.data.data
				}
			})
			
			// 获取首页商品列表
			uni.request({
				url:'https://api.it120.cc/hjl/shop/goods/list/v2',
				method:"POST",
				data:this.queryInfo,
				success: (res) => {
					console.log(res);
					this.goodsList = res.data.data.result
				}
			})
		},
		// 监听页面滚动
		onPageScroll(e) {
			console.log(e.scrollTop);
			if(e.scrollTop>100){
				this.isFixedTop = true
			}else{
				this.isFixedTop = false
			}
		},
		methods: {
			goSearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			// 返回顶部
			goBack(){
				// uni 的一个api
				uni.pageScrollTo({
					scrollTop:0,
					duration:500
				})
			}
		}
	}
</script>

<style lang="scss">
	.search{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: skyblue;
		.input{
			width: 80%;
			height: 70%;
			border-radius: 20rpx;
			background: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}
	.swiper{
		width: 100%;
		height: 400rpx;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.goods{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		.goods-item{
			
			width: 50%;
			font-size: 28rpx;
			.img{
				width: 100%;
				height: 300rpx;
			}
			
		}
	}
	.fixedTop{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.back{
		position: fixed;
		right: 40rpx;
		bottom: 100rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		line-height: 60rpx;
		text-align: center;
		background: deepskyblue;
		color:#fff;
		z-index: 99;
	}
</style>
